{extend name="base" /}
{block name="content"}
<div class="g-main">
    <div class="m-main-title">
        <div class="m-container-fluid">
            <a href="{:url('index/welcome')}"><i class="icon icon-home"></i>首页</a>
            <span class="icon-angle-right"></span>
            <span>系统</span>
            <span class="icon-angle-right"></span>
            <span>系统设置</span>
            <span class="icon-angle-right"></span>
            <span>后台菜单管理首页</span>
            <a class="u-flush"><i class="icon-repeat"></i></a>
        </div>
    </div>
    <div class="m-main-content">
        <div class="m-container">
            <table class="m-table">
                <tr>
                    <th>
                        <div class="m-options cf">
                            <div class="m-opts fl"><a href="{:url('add')}" class="u-btn"><i class="icon-plus"></i>添加菜单</a></div>
                        </div>
                    </th>
                </tr>
            </table>
            <form class="layui-form m-list-form">
                <table class="m-table mt-10">
                    <tbody class="datas">
                        <tr>
                            <th width="8%">排序</th>
                            <th width="5%">ID</th>
                            <th width="17%">名称</th>
                            <th width="20%">icon 图标</th>
                            <th width="30%">链接</th>
                            <th width="10%">状态</th>
                            <th width="10%">操作</th>
                        </tr>
                        {foreach name="menus" item="menu"}
                        <tr class="m-menu m-menu-{$menu.parent_id}"{if condition="$menu['level'] gt 1"} style="display: none;"{/if}>
                            <td>{$menu.html|raw}<a href="javascript:;" class="u-caret-right" data-id="{$menu.id}" data-sub-ids="{$menu.sub_ids}"><i class="icon-caret-right"></i></a><input type="text" name="list_order[{$menu.id}]" lay-skin="primary" class="u-ipt u-ipt-tiny" value="{$menu.list_order}" /></td>
                            <td>{$menu.id}</td>
                            <td>{$menu.name}</td>
                            <td>{$menu.icon}</td>
                            <td>{$menu.url}</td>
                            <td><span class="u-status{$menu.status ? ' u-status-danger' : ' u-status-primary'}" data-id="{$menu.id}" data-key="status" data-value="{$menu.status}">{$menu.status_txt}</span></td>
                            <td class="m-opt"><a href="{:url('add', ['pid' => $menu['id']])}" title="添加子菜单"><i class="icon-plus"></i></a><a href="{:url('add', ['id' => $menu['id']])}" title="编辑"><i class="icon-pencil"></i></a><a href="javascript:;" title="删除" class="u-del" data-id="{$menu.id}"><i class="icon-trash"></i></a></td>
                        </tr>
                        {/foreach}
                        <tr>
                            <td colspan="7" class="m-options"><button class="u-btn u-batch-sorted"><i class="icon-sort"></i>批量排序</button></td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
</div>
{/block}
{block name="extrajs"}
<script>
    $(function(){
        $('.u-caret-right').on('click', function(){
            var id = $(this).attr('data-id');
            if ($('.m-menu-' + id).is(':hidden')) {
                $(this).find('i').removeClass('icon-caret-right').addClass('icon-caret-down');
                $('.m-menu-' + id).show();
            } else {
                $(this).find('i').removeClass('icon-caret-down').addClass('icon-caret-right');
                var subIds = $(this).attr('data-sub-ids').split(',');
                for (var i = 0; i < subIds.length; i++) {
                    $('.m-menu-' + subIds[i]).hide();
                    $('.m-menu-' + subIds[i]).find('.u-caret-right i').removeClass('icon-caret-down').addClass('icon-caret-right');
                }
                $('.m-menu-' + id).find('.icon-caret-down').removeClass('icon-caret-down').addClass('icon-caret-right');
                $('.m-menu-' + id).hide();
            }
        });
    });
</script>
{/block}